<template>
  <div class="tabs">
    <div class="tabs-bar">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tabs-tab', { active: activeTab === index }]"
        @click="selectTab(index)"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tabs-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  data() {
    return {
      activeTab: 0,
      tabs: [],
    };
  },
  methods: {
    selectTab(index) {
      this.activeTab = index;
      this.$emit('tab-change', index);
    },
    addTab(tab) {
      this.tabs.push(tab);
    },
  },
  mounted() {
    this.$children.forEach((child, index) => {
      if (child.$options.name === 'TabPane') {
        this.addTab({ title: child.title });
      }
    });
  },
};
</script>

<style scoped>
.tabs {
  width: 100%;
}
.tabs-bar {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.tabs-tab {
  padding: 10px 20px;
  cursor: pointer;
  user-select: none;
}
.tabs-tab.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
.tabs-content {
  padding: 20px;
}
</style>
